<template>
  <div v-bind:class="barClass" v-on:mousedown.prevent="startResize"></div>
</template>

<script>
  import _ from 'lodash'
  import { emitter, E } from 'utils'

  export default {
    data: function () {
      return {
        originalPoint: {}
      }
    },
    props: {
      flexDirection: {
        type: String,
        required: true
      },
      viewId: {
        type: String,
        required: true
      }
    },
    computed: {
      barClass: function () {
        return {
          'resize-bar': true,
          'col-resize': this.flexDirection === 'row',
          'row-resize': this.flexDirection === 'column'
        }
      }
    },
    methods: {
      getNextViewNode: function (currentDOM) {
        let sibling = currentDOM.nextSibling
        if (sibling) {
          while (sibling.nodeName !== currentDOM.nodeName) {
            sibling = sibling.nextSibling
            if (!sibling) break
          }
        }
        return sibling
      },
      startResize: function (e) {
        if (e.button !== 0) { return }
        if (!this.viewId) { return }
        let leftViewDom = document.getElementById(this.viewId)
        let rightViewDom = this.getNextViewNode(leftViewDom)
        if (!rightViewDom) { return }

        this.originalPoint = { x: e.pageX, y: e.pageY }
        let [leftSize, rightSize] = [Number(leftViewDom.style.flexGrow), Number(rightViewDom.style.flexGrow)]

        const handleResize = (e) => {
          let { x, y } = this.originalPoint
          let [dX, dY] = [x - e.pageX, y - e.pageY]
          this.originalPoint = { x: e.pageX, y: e.pageY }
          let [leftSize, rightSize] = this.resize(leftViewDom.id, rightViewDom.id, dX, dY)
        }
        const stopResize = (e) => {
          window.document.removeEventListener('mousemove', handleResize)
          window.document.removeEventListener('mouseup', stopResize)
          // confirmResize(leftViewDom.id, leftSize, rightViewDom.id, rightSize)
        }
        window.document.addEventListener('mousemove', handleResize)
        window.document.addEventListener('mouseup', stopResize)
      },

      debounced: function () {
        _.debounce(func => func(), 50)
      },

      resize: (leftViewId, rightViewId, dX, dY) => {
        let leftViewDom = document.getElementById(leftViewId)
        let rightViewDom = document.getElementById(rightViewId)
        let [leftSize, rightSize] = [Number(leftViewDom.style.flexGrow), Number(rightViewDom.style.flexGrow)]
        leftSize = leftSize === 0 ? 1 : leftSize
        rightSize = rightSize === 0 ? 1 : rightSize

        var r, rA, rB
        if (leftViewDom.parentNode.style.flexDirection === 'column') {
          r = dY
          rA = leftViewDom.offsetHeight
          rB = rightViewDom.offsetHeight
        } else {
          r = dX
          rA = leftViewDom.offsetWidth
          rB = rightViewDom.offsetWidth
        }
        if (!rA || !rB) return [leftSize, rightSize]
        leftSize *= (rA - r) / rA
        rightSize *= (rB + r) / rB
        leftViewDom.style.flexGrow = leftSize
        rightViewDom.style.flexGrow = rightSize

        // debounced()(() => {
        //   emitter.emit(E.PANEL_RESIZED)
        // })
        return [leftSize, rightSize]
      }
    }
  }

</script>
